﻿@page "/forms/select"

<Pager Title="Select" Description="Customize the native <select>s with custom CSS that changes the element’s initial appearance."
	Indicates="@(new[]{"Default"})">
	<Demo Title="Default">
		<Description>

		</Description>
		<Run>
			<Form Model="this">
			<FormSelect @bind-Value="Select">
				<option selected>Open this select menu</option>
				<option value="1">One</option>
				<option value="2">Two</option>
				<option value="3">Three</option>
			</FormSelect>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormSelect @bind-Value=""Select"">
	<option selected>Open this select menu</option>
	<option value=""1"">One</option>
	<option value=""2"">Two</option>
	<option value=""3"">Three</option>
</FormSelect>
```
			")
		</Code>
	</Demo>
		<Demo Title="Sizing">
		<Description>
			You may also choose from small and large custom selects to match our similarly sized text inputs.
		</Description>
		<Run>
			<Form Model="this">
				<FormSelect @bind-Value="Select" Size="Size.Large">
					<option selected>Open this select menu</option>
					<option value="1">One</option>
					<option value="2">Two</option>
					<option value="3">Three</option>
				</FormSelect>
				<br />
				<FormSelect @bind-Value="Select" Size="Size.Small">
					<option selected>Open this select menu</option>
					<option value="1">One</option>
					<option value="2">Two</option>
					<option value="3">Three</option>
				</FormSelect>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormSelect @bind-Value=""Select"" Size=""Size.Large"">
	<option selected>Open this select menu</option>
	<option value=""1"">One</option>
	<option value=""2"">Two</option>
	<option value=""3"">Three</option>
</FormSelect>

<FormSelect @bind-Value=""Select"" Size=""Size.Small"">
	<option selected>Open this select menu</option>
	<option value=""1"">One</option>
	<option value=""2"">Two</option>
	<option value=""3"">Three</option>
</FormSelect>
```
			")
		</Code>
	</Demo>
	<Demo Title="Multiple">
		<Description>

		</Description>
		<Run>
			<Form Model="this">
			<FormSelect @bind-Value="Select" Multiple>
				<option selected>Open this select menu</option>
				<option value="1">One</option>
				<option value="2">Two</option>
				<option value="3">Three</option>
			</FormSelect>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormSelect @bind-Value=""Select"" Multiple>
	<option selected>Open this select menu</option>
	<option value=""1"">One</option>
	<option value=""2"">Two</option>
	<option value=""3"">Three</option>
</FormSelect>
```
			")
		</Code>
	</Demo>
	<Demo>
		<Description>
			As is the <code>MultipleSize</code> parameter:
		</Description>
		<Run>
			<Form Model="this">
			<FormSelect @bind-Value="Select" Multiple MultipleSize="2">
				<option selected>Open this select menu</option>
				<option value="1">One</option>
				<option value="2">Two</option>
				<option value="3">Three</option>
			</FormSelect>
			</Form>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormSelect @bind-Value=""Select"" Multiple MultipleSize=""2"">
	<option selected>Open this select menu</option>
	<option value=""1"">One</option>
	<option value=""2"">Two</option>
	<option value=""3"">Three</option>
</FormSelect>
```
			")
		</Code>
	</Demo>
</Pager>
@code{
	string Select { get; set; }
}